import React, {useState,useEffect} from 'react';
import { Layout, Menu } from 'antd';
import {Link} from "react-router-dom";
import LeftMenu from "./../components/LeftMenu";
import {inject,observer} from "mobx-react";
const { Header, Content, Sider } = Layout;

function Home(props) {
    const juri=props.user.routerurl
    const [data,setData]=useState()
    const Jurip=()=> {
        let arr=[]
        juri.forEach((item,key)=>{
            if(item.Id<=3) {
                arr.push(<Menu.Item key={item.Id}><Link to={item.routerUrl}>{item.routerName}</Link></Menu.Item>
                )
            }
        })
        setData(arr)
    }
    useEffect(()=>{
        Jurip();
    },[])
    return (
        <div>
            <Layout>
                <Header >
                    <div className="logo" />
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
                        {data}
                    </Menu>
                </Header>
                <Layout className="zhentiLayout">
                    <Sider width={200} className="site-layout-background">
                        <LeftMenu></LeftMenu>
                    </Sider>
                    <Layout style={{ padding: '0 0px 24px 24px' }}>
                        <Content
                            className="site-layout-background"
                            style={{
                                padding: 24,
                                margin: 0,
                                minHeight: 280,
                            }}
                        >
                            {props.children}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        </div>
    );

}

export default inject('user')(observer(Home));